<template>
	<view v-if="props.list && props.list.length > 0" class="cu-list menu-avatar">
		<view @click="handleSelect(item)" v-for="(item, index) in list" :key="index" class="cu-item cur">
			<view class="cu-avatar radius lg image_220 bg-blue">
				<text class="text-size-32">打印机</text>
			</view>
			<view class="content">
				<view>
					<view class="text-cut text-size-30">{{ item.name }}</view>
				</view>
				<view class="text-grey text-sm margin-top-xs text-sigle">{{ item.manufacturer }}</view>
				<view class="text-grey text-sm flex ">
					<view class="text-cut">
						设备码：
					
						{{ item.snCode }}
					</view>
				</view>
				<view class="text-grey text-sm flex ">
					<view class="text-cut">创建时间：{{ item.createTime }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { useSettingStore } from '@/stores/index';
	const setting = useSettingStore();
	const emit = defineEmits(['action']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		list: {
			default: () => {
				return [
					{
						"id": "21456915468000130",
						"shopId": "",
						"shopName": null,
						"name": "厨房",
						"manufacturer": "测试",
						"snCode": "12345364366",
						"state": 1,
						"createTime": "2023-12-06 21:16:15"
					}
				];
			}
		}
	});
	const handleSelect = (e : any) => {
		emit('action', e);
	};
</script>

<style lang="scss" scoped>
	.cu-list.menu-avatar>.cu-item {
		position: relative;
		display: flex;
		padding-right: 10rpx;
		height: 240rpx;
		background-color: #ffffff;
		justify-content: flex-end;
		align-items: center;
	}

	.cu-list.menu-avatar>.cu-item .content {
		position: absolute;
		left: 220rpx;
		width: calc(100% - 220rpx);
		height: 100%;
		padding-top: 40rpx;
	}

	.cu-avatar.lg {
		width: 180rpx;
		height: 180rpx;
		font-size: 2em;
	}
</style>